<template>
  <div>
    <el-row class="form-title">
      <el-col :span="12">
        <h2>验收详情</h2>
      </el-col>
      <el-col v-if="packUpOrNot" :span="12" class="fn-right">
        <el-button type="text" @click="isPackUp = !isPackUp">
          {{ isPackUp ? '收起' : '展开' }}
          <i
            :class="isPackUp ? 'el-icon-arrow-down' : 'el-icon-arrow-right'"
          ></i>
        </el-button>
      </el-col>
    </el-row>

    <div ref="tableBox" v-show="isPackUp">
      <table class="t-table t-table-info mt-15">
        <!-- <caption>基本参数</caption> -->
        <tbody>
          <tr>
            <td class="td-label">验收申请人</td>
            <td class="td-content">
              {{ dataForm.applyPerson }}
            </td>
            <td class="td-label">验收申请部门</td>
            <td class="td-content">
              {{ dataForm.applyOrgan }}
            </td>
            <td class="td-label">验收人</td>
            <td class="td-content">
              {{ dataForm.applicantPerson }}
            </td>
            <td class="td-label">验收部门</td>
            <td class="td-content">
              {{ dataForm.applicantOrgan }}
            </td>
          </tr>
        </tbody>
      </table>
      <el-table class="mt-5" tooltip-effect="light" border :data="tableData">
        <el-table-column prop="applyType" label="验收阶段" width="">
        </el-table-column>

        <el-table-column
          prop="acceptanceContent"
          label="验收内容"
          min-width="100"
          width=""
        >
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              title="验收内容："
              trigger="click"
            >
              <div style="padding: 5px; overflow-y: auto; height: 200px">
                {{ scope.row.acceptanceContent }}
              </div>
            </el-popover>
          </template>
        </el-table-column>
        <el-table-column prop="userName" label="验收申请部门" width="">
        </el-table-column>
        <el-table-column prop="expectEndTime" label="验收期望完成时间" width="">
        </el-table-column>
        <el-table-column prop="acceptanceTime" label="验收完成时间" width="">
        </el-table-column>
        <el-table-column prop="acceptanceResult" label="验收结果" width="">
        </el-table-column>
        <el-table-column prop="acceptanceContent1" label="验收意见" width="">
        </el-table-column>
        <el-table-column prop="Attachments" label="附件" width="">
          <template slot-scope="scope">
            <el-popover
              placement="right"
              width="400"
              title="附件："
              trigger="click"
            >
              <div v-for="(item, index) in scope.row.Attachments" :key="index">
                <el-button type="text" @click="handleFilePreview(item)">
                  {{ item.name }}
                </el-button>
                <!-- scope.row -->
                <br />
              </div>
            </el-popover>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<style scoped>
</style>

<script>
import axios from '../../plugins/axios'
import $cookie from '../../plugins/cookie'
export default {
  props: {
    // 验收单ID，需求ID，任务单ID必须传其中一个
    id: {
      // 验收单ID
      type: [Number, String],
      default: () => {
        return ''
      }
    },
    requireId: {
      // 需求ID
      type: [Number, String],
      default: () => {
        return ''
      }
    },
    taskIds: {
      // 任务单ID
      type: String,
      default: () => {
        return ''
      }
    },
    packUpOrNot: {
      type: Boolean,
      required: false
    }
  },
  created() {
    this.getDetail()
  },
  data() {
    return {
      fileList: [],
      uploadAction: '',
      isPackUp: true,
      dialogVisible: false,
      uploadData: {},
      tableData: [],
      dataForm: {
        applyPerson: '',
        applyOrgan: '',
        applicantPerson: '',
        applicantOrgan: ''
      }
    }
  },
  methods: {
    async getDetail() {
      this.isPackUp = !this.packUpOrNot
      let { data } = await axios.get(
        '/require-main/acceptance/getAcceptanceDetailsList?id=' +
          this.id +
          '&requireId=' +
          this.requireId +
          '&taskIds=' +
          this.taskIds
      )
      this.dataForm = data.beans
    },
    handleFilePreview(file) {
      this.$downfile('/require-main/uploadFile/download/' + file.id)
    }
  }
}
</script>
